<template>
  <div class="menuBody">
    <div class="addMenu">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i> 数据列表</span>
          <el-button size="small" @click="emnuAdd()">添加</el-button>
        </div>
      </el-card>
      <el-dialog :title="isEdit ? '编辑用户' : '添加用户'" :visible.sync="dialogVisible" width="38%">
        <el-form
          ref="form"
          :model="menuForm"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="菜单名称:" prop="title">
            <el-input
              v-model="menuForm.title"
              placeholder="请输入菜单名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="上级菜单:">
            <el-select v-model="menuForm.parentId" size="small" clearable>
              <el-option label="无上级菜单" value="0"></el-option>
              <el-option
                v-for="item in parent_ids"
                :key="item.menuId"
                :label="item.title"
                :value="item.menuId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="前端名称:" prop="url">
            <el-input
              v-model="menuForm.url"
              placeholder="请输入url名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="前端图标:" prop="icon">
            <el-input
              v-model="menuForm.icon"
              placeholder="请输入前端图标"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="是否显示:">
            <el-radio v-model="menuForm.radio" label="1">是</el-radio>
            <el-radio v-model="menuForm.radio" label="2">否</el-radio>
          </el-form-item>
          <el-form-item label="排序:">
            <el-input v-model="menuForm.sort" ></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="menuCreateCancel()" size="small">取 消</el-button>
          <el-button type="primary" @click="menuCreateDetermine()" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="menuList">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
          class="icon-card"
        >
          <el-table-column prop="menuId" label="ID" width="70px">
          </el-table-column>
          <el-table-column prop="title" label="菜单名称"> </el-table-column>
          <el-table-column prop="level" label="菜单级数"> </el-table-column>
          <el-table-column prop="url" label="前端名称"> </el-table-column>
          <el-table-column prop="icon" label="前端图标">
            <template slot-scope="scope">
              <i :class="scope.row.icon"></i>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="isEnable"
            label="是否显示"
            width="100px">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state">
              </el-switch>
            </template>
          </el-table-column> -->

          <el-table-column prop="operation" label="设置">
            <template slot-scope="scope">
              <div>
                <el-button
                  v-if="!is_parent"
                  type="text"
                  @click="viewSubordinates(scope.row.menuId)"
                  >查看下级</el-button
                >
                <el-button
                  v-if="is_parent"
                  type="text"
                  @click="viewSubordinates(0)"
                  >返回上级</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="menuUpdate(scope.row)">编辑</el-button>
                <el-button type="text" @click="menuDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import menu from "@/api/menu";
import { Message, MessageBox } from "element-ui";
const defaultMenu = {
  menuId: null,
  title: "",
  url: "",
  parentId: "",
  icon: "",
  level: ""
};


export default {
  data() {
    return {
      input: "",
      dialogVisible: false,
      parent_ids: [],
      total: 4,
      isEdit: false,
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      currentPage: 1,
      is_parent: false,
      parentViewId: 0,
      menuForm: Object.assign({}, defaultMenu),
      rules: {
        title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        icon: [
          { required: true, message: "请输入前端图标", trigger: "change" },
        ],
        url: [{ required: true, message: "请输入url名称", trigger: "change" }],
      },
    };
  },
  created() {
    this.menuGetList(0, false, true);
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.menuGetList(this.parentViewId);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.menuGetList(this.parentViewId);
    },

    /** 修改和添加的互换 */
    transformMenuForm(dialogVisible,isEdit,menuForm){
      this.dialogVisible = dialogVisible
      this.isEdit=isEdit
      this.menuForm = Object.assign({},menuForm)
    },
    emnuAdd() {
     this.transformMenuForm(true,false,defaultMenu)
    },
    menuUpdate(row){
     this.transformMenuForm(true,true,row)
    },

    deleteBox(message, title, api, row_message, item_message) {
      MessageBox.confirm(message, title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api.delete(row_message).then((res) => {
          Message({
            message: "删除" + res.message,
            type: "success",
            duration: 5 * 1000,
          });
          this.tableData = this.tableData.filter((item) => {
            return item[item_message] != row_message;
          });
        });
      });
    },
    menuDelete(row) {
      if (row.level === "一级") {
        this.deleteBox(
          "确定要删除该记录吗?",
          "会把下级一并删除,注意 ~ ~",
          menu,
          row.menuId,
          "menuId"
        );
      } else {
        this.deleteBox(
          "确定要删除该记录吗?",
          "确定删除",
          menu,
          row.menuId,
          "menuId"
        );
      }
    },
    viewSubordinates(parentId) {
      this.parentViewId = parentId;
      this.menuGetList(parentId, true);
    },
    tableDataFor() {
      this.tableData.forEach((item) => {
        item["level"] = item["level"] === 0 ? "一级" : "二级";
      });
    },
    menuCreateCancel() {
      this.dialogVisible = false;
    },
    /**
     * @param parentId parentId父的id
     * @param sign 查看下级和上级切换时需要的boolean
     * @param createSign 初始化时,需要完成一次列表的生成, 用来做初始化标识的
     */
    menuGetList(parentId, sign, createSign) {
      menu.list(parentId,this.pageSize,this.pageNum).then((res) => {
        if (res.data.list.length > 0) {
          if (sign) {
            this.is_parent = !this.is_parent;
          }
          this.total = res.data.total;
          this.tableData = res.data.list;
          if (createSign) {
            this.parent_ids = res.data.list;
          }
          this.tableDataFor();
        } else {
          Message({
            message: "该菜单没有下级",
            type: "warning",
            duration: 5 * 1000,
          });
        }
      });
    },
    //修改和添加
    menuCreateDetermine() {
      this.menuForm["level"] = this.menuForm["parentId"] === "0" ? 0 : 1;
      MessageBox.confirm("确定要进行该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          this.menuForm['level'] = 0
          menu.update(this.menuForm.menuId, this.menuForm).then((res) => {
            Message({
              message: "修改成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.menuGetList(this.parentViewId,false,true);
            this.dialogVisible = false;
          });
        } else {
          menu.create(this.menuForm).then((res) => {
            Message({
              message: "创建" + res.message,
              type: "success",
              duration: 5 * 1000,
            });
            this.dialogVisible = false;
            this.menuGetList(this.parentViewId);
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.menuBody {
  height: 91.3%;
  width: 100%;
  .addMenu {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .box-card {
      width: 95%;
      height: 60.5px;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 87%;
        }
      }
    }
    /deep/ .el-form {
      width: 80%;
      padding-left: 70px;
      .el-form-item,
      .el-form-item__label,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        height: 32px;
        width: 250px;
      }
      .desc {
        height: 110px;
        .el-form-item__label,
        .el-form-item__content,
        .el-input,
        .el-textarea,
        .el-textarea__inner {
          height: 110px;
        }
      }
    }
  }
  .menuList {
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 620px;
        }
      }
      /deep/ .el-card__body {
        .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 48px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 50px;
        }
        .block {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
.icon-card i {
  font-size: 22px;
}
</style>
